<!--
 * @Description: 矩形树图
 * @Author: zy
 * @Date: 2020-10-25 13:41:17
 * @LastEditors: zy
 * @LastEditTime: 2020-10-25 20:30:20
-->
<template>
    <div id="treemapchart">
      <el-row>
        <el-col :span="6">
          <el-button type="primary" @click="sumBySize">Size</el-button>
          <el-button type="primary" @click="sumByCount">Count</el-button>
          <div id="data">
            <el-tree :data="data" :props="props" node-key="name" :default-expanded-keys="expanded" @node-click="handleNodeClick"></el-tree>
          </div>
        </el-col>
        <el-col :span="18">
          <div id="chart"></div>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import {TreeMapChart} from './TreeMapChart'
export default {
  data () {
    return {
      data: [],
      chart: [],
      expanded: ['flare'],
      props: {
        children: 'children',
        label: 'name'
      },
      treeData: {}
    }
  },
  created () {

  },
  mounted () {
    this.chart = new TreeMapChart('chart')
    this.getData()
  },
  methods: {
    async getData () {
      let res = await this.$http.get('./static/data/treemap.json')
      this.treeData = res.data
      this.chart.data = this.treeData
      this.data.push(this.treeData)
      this.chart.draw()
    },
    handleNodeClick (data) {
      console.log(data)
    },
    sumBySize () {
      this.chart.sum = 'size'
      this.chart.data = this.treeData
      this.chart.draw()
    },
    sumByCount () {
      this.chart.sum = 'count'
      this.chart.data = this.treeData
      this.chart.draw()
    }
  }
}
</script>
<style scoped>
   #treemapchart {
       height: 100%;
       width: 100%;
   }
   #treemapchart>.el-row {
       height: 100%;
   }
   #treemapchart>.el-row>.el-col {
       height: 100%;
   }
   #chart {
       height: 100%;
       width: 100%;
   }
</style>
